<template>
  <basic-container>
    <el-tabs type="border-card" class="tab-font">
      <el-tab-pane label="生产效率搜索"> </el-tab-pane>
      <avue-form ref="form" :option="tableOption" v-model="form">
        <template slot-scope="{ size }" slot="btn">
          <el-button type="primary" :size="size" class="el-icon-search" @click="handleSubmit">搜索</el-button>
          <el-button :size="size" @click="handleCancel" class="el-icon-delete">清空</el-button>
        </template>
      </avue-form>
    </el-tabs>
    <el-tabs type="border-card" class="tab-font" style="margin-top: 24px">
      <el-tab-pane label="生产效率明细" class="tab-font"> </el-tab-pane>
      <avue-crud ref="crud" :page="page" :option="option" :table-loading="loading" :data="data" @current-change="currentChange" @size-change="sizeChange">
        <template slot="menuLeft">
          <el-button type="warning" size="small" plain icon="el-icon-download" @click="handleExport">导出 </el-button>
        </template>
        <!--        <template slot="menuRight">-->
        <!--          <user-table-config :option="option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>-->
        <!--        </template>-->
      </avue-crud>
    </el-tabs>
    <export-excel
      :visible="exprotVisible"
      :option="option"
      :page="page"
      :data="exportData"
      :loading="loading"
      name="生产效率报表"
      @selectData="handleSelectData"
      @close="handleClose"
    ></export-excel>
  </basic-container>
</template>

<script>
import moment from 'moment';
import { getProductivityReportList } from '@/api/report/report';
import exportExcel from '@/components/export-excel';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';

export default {
  name: 'productivityReport',
  components: {
    exportExcel,
    userTableConfig
  },
  mixins: [userConfig()],
  data() {
    return {
      pageCode: 'PRODUCTIVITY_REPORT',
      loading: false,
      data: [],
      form: {
        examineDate: this.getDefaultTime()
      },
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      exprotVisible: false,
      exportData: [],
      tableOption: {
        menuPosition: 'left',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '时间范围',
            span: 6,
            prop: 'examineDate',
            type: 'daterange',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              }
            },
            rules: [
              {
                required: true,
                message: '请选择时间范围',
                trigger: 'blur'
              },
              {
                trigger: 'change',
                validator: (rule, value, callback) => {
                  const endTime = value[1];
                  const startTime = value[0];
                  if (moment(endTime).diff(moment(startTime), 'day') > 93) {
                    callback(new Error('查询时间范围最多选择3个月'));
                  }
                  callback();
                }
              }
            ]
          },
          {
            label: '产线名称',
            prop: 'productionLineName',
            span: 4
          },
          {
            label: '产品名称',
            prop: 'partName',
            span: 4
          },
          {
            label: '产品编码',
            prop: 'partNo',
            span: 4
          },
          {
            label: '',
            prop: 'btn',
            span: 6,
            formslot: true
          }
        ]
      },
      option: {
        height: 'calc(100vh - 540px)',
        border: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        menu: false,
        columnBtn: false,
        refreshBtn: false,
        indexLabel: '序号',
        column: [
          {
            label: '产线名称',
            prop: 'productionLineName'
          },
          {
            label: '工单号',
            prop: 'orderNo'
          },
          {
            label: '工单实际开始时间',
            prop: 'actualStartDate',
            minWidth: 110
          },
          {
            label: '工单实际结束时间',
            prop: 'actualEndDate',
            minWidth: 110
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '工单计划数量',
            prop: 'planQuantity',
            minWidth: 120
          },
          {
            label: '产出数量',
            prop: 'actualQuantity'
          },
          {
            label: '标准工时（分）',
            prop: 'tpc',
            minWidth: 110
          },
          {
            label: '生产总工时（分）',
            prop: 'totalProductionHours',
            minWidth: 110
          },
          {
            label: '生产效率',
            prop: 'productEfficiency'
          },
          {
            label: '不良数',
            prop: 'ngQuantity'
          },
          {
            label: '不良率',
            prop: 'defectiveRate'
          }
        ]
      }
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    async onLoad() {
      try {
        this.loading = true;
        const { productionLineName = '', partNo = '', partName = '' } = this.form;
        const params = {
          current: this.page.currentPage,
          size: this.page.pageSize,
          workStartDate: this.form.examineDate[0],
          workEndDate: this.form.examineDate[1],
          productionLineName,
          partName,
          partNo
        };
        const res = await getProductivityReportList(params);
        this.data = res.data.data.records;
        this.page.currentPage = res.data.data.current;
        this.page.total = res.data.data.total;
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad();
    },
    handleCancel() {
      this.data = [];
      this.$refs.form.resetForm();
    },
    handleExport() {
      this.exportData = this.data;
      this.exprotVisible = true;
    },
    handleClose() {
      this.exprotVisible = false;
      this.data = this.exportData.splice(0, this.page.pageSize);
    },
    handleSelectData(val) {
      let current = 1;
      let pageSize = this.page.pageSize;
      if (val === 'all') {
        // 接口返回上限500条数据
        pageSize = 500;
      } else {
        current = this.page.currentPage;
      }
      const { productionLineName = '', partNo = '', partName = '' } = this.form;
      const params = {
        current: current,
        size: pageSize,
        workStartDate: this.form.examineDate[0],
        workEndDate: this.form.examineDate[1],
        productionLineName,
        partName,
        partNo
      };
      this.loading = true;
      getProductivityReportList(params)
        .then((res) => {
          const data = res.data.data;
          this.exportData = data.records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSubmit() {
      this.$refs.form.validate((valid, done) => {
        if (valid) {
          this.page.currentPage = 1;
          this.page.pageSize = 15;
          this.onLoad();
          done();
        }
      });
    },
    getDefaultTime() {
      return [this.$moment(new Date()).subtract(6, 'days').format('yyyy-MM-DD'), this.$moment(new Date()).format('yyyy-MM-DD')];
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-font {
  ::v-deep .el-tabs__item {
    color: #606266 !important;
    font-weight: bold;
  }
}
</style>
